<template>
  <div class="content-box">
    <el-form v-bind="getFormProps()">
      <el-radio-group v-model="currentTab" class="checker-tab" @change="handleStatusChange">
        <el-radio :label="1">球队参赛者</el-radio>
        <el-radio :label="2" v-if="false">球队待处理</el-radio>
        <el-radio :label="3" v-if="$route.query.cost != 0">待支付</el-radio>
      </el-radio-group>
    </el-form>
    <div class="divider"></div>
    <div class="players playmanage-list" v-if="race_tem_manage.total > 0">
      <el-table :data="race_tem_manage.list" style="width: 100%" v-show="currentTab!=2" @selection-change="handleSelectionChange"> 
        <el-table-column type="selection" width="35" v-if="currentTab===1 && race_detail.cost === 0 && !isHistory">
        </el-table-column>
        <el-table-column label="球队" width="380" :show-overflow-tooltip="isHidden">
          <template scope="scope">
            <x-img class="logo" :src="scope.row.iconUrl"/>
            <span class="team-name" :title="scope.row.nickName">{{ scope.row.nickName }}</span>
            <img class="sub-logo" v-if="scope.row.pcImgtxtUrl" :src="scope.row.pcImgtxtUrl">
          </template>
        </el-table-column>
        <el-table-column prop="area" label="地区" width="160" :show-overflow-tooltip="isHidden"></el-table-column>
        <el-table-column prop="" label="">
          <template scope="scope">
            <a class="link" href="javascript:void(0)" @click="showTeamList(scope.row)">查看球队成员</a>
          </template>
        </el-table-column>
        <el-table-column label="" show-overflow-tooltip :render-header="reRender">
          <template scope="scope">
            <el-button v-if="currentTab==1 && race_detail.cost === 0 && !isHistory" size="small" :disabled="race_detail.status > 4" @click="hangleOut(scope.$index, scope.row)">踢出</el-button>
            <span v-if="currentTab==3 && scope.row.status===7" class="warn">{{scope.row.statusName}}</span>
            <span v-if="currentTab==3 && (scope.row.status===9 || scope.row.status===10)" class="red">{{scope.row.statusName}}</span>
          </template>
        </el-table-column>
      </el-table>

      <!-- <el-table :data="getTeammanage.list" style="width: 100%" v-show="currentTab==2" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="35">
        </el-table-column>
        <el-table-column label="球队" width="380">
          <template scope="scope">
            <img class="logo" :src="scope.row.iconUrl">
            <span class="team-name">{{ scope.row.nickName }}</span>
            <img class="sub-logo" v-if="scope.row.pcImgtxtUrl" :src="scope.row.pcImgtxtUrl">
          </template>
        </el-table-column>
        <el-table-column prop="area" label="地区" width="220"></el-table-column>
        <el-table-column label="" show-overflow-tooltip :render-header="reRender">
          <template scope="scope">
            <el-button size="small" @click="checkOut($index, item)">拒绝</el-button>
            <el-button size="small" @click="checkOut($index, item)">同意</el-button>
          </template>
        </el-table-column>
      </el-table> -->

    </div>
    <!--无数据提示-->
    <placeholder text="暂无参赛人员" src="/static/images/match/nomatch.png" v-else-if="race_tem_manage.total == 0"></placeholder>
    <!--loading-->
    <div class="loading" v-else><div v-loading.body="true"></div></div>
    <!--分页-->
    <el-pagination
      v-bind="getPaginationProps(race_tem_manage)"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange">
    </el-pagination>
    <div class="button-box">
      <el-button v-if="currentTab==1||currentTab==2" type="primary" @click="handleCloseMatch" :disabled="!iscloseMatch || isHistory">关闭赛事</el-button>
      <el-button v-if="currentTab==1||currentTab==2" type="primary" @click="handleTermiNation" :disabled="!iscloseBaoming || isTrue || isHistory || (race_detail.status > 4)">提前结束报名</el-button>
       <!-- <router-link v-if="currentTab==1||currentTab==2" :to="'/race/detail/player/invite-team?id='+$route.query.id+'&tasktype='+$route.query.tasktype">
        <el-button>邀请参赛</el-button>
      </router-link>-->
      <el-button type="primary" @click="exportExcel()">导出Excel</el-button>
    </div>
  </div>
</template>

<script>
import raceApi from 'api/race'
import { mapGetters } from 'vuex'
import { downloadFile } from 'utils'
import { pagingList } from 'utils/mixins'
export default {
  mixins: [pagingList],
  props: {
    isHistory: {
      type: Boolean,
      defalut: false
    },
    history: {
      type: Boolean,
      default: false
    }
  },
  mounted () {
    this.nowTime = new Date().format()
  },
  computed: {
    ...mapGetters({
      race_detail: 'race_detail',
      race_tem_manage: 'race_tem_manage'
    }),
    iscloseMatch: function () {
      return (new Date(this.race_detail.signStartTime).format() > this.nowTime) || (this.race_detail.matchScheduleDone === 1 && this.nowTime <= new Date(this.race_detail.endTime).format())
    },
    iscloseBaoming: function () {
      return (this.race_tem_manage.total >= 4) && (this.nowTime <= new Date(this.race_detail.signEndTime).format())
    }
  },
  data () {
    return {
      query: this.getQuery({status: this.$route.query.cost === '0' ? '2' : '8'}),
      isHidden: true,
      isTrue: false,
      nowTime: '',
      userIds: [],
      currentTab: 1
    }
  },
  methods: {
    handleStatusChange (value) {
      this.selectTeamList(value)
    },
    selectTeamList (val) {
      if (val === 1) { // 参赛者
        if (this.race_detail.cost === 0) { // 免费
          this.query.status = '2'
        } else {
          this.query.status = '8'
        }
      } else if (val === 2) { // 待处理
        this.query.status = '1'
      } else if (val === 3) { // 待支付
        this.query.status = '7, 9, 10'
      }
      this.submit(this.query) // 提交表单
    },
    // 获取参赛球队数据接口
    fetch (query) {
      Object.assign(query, {
        matchId: this.$route.query.id
      })
      this.$store.dispatch('race_tem_manage', query)
    },
    checkOut (item) {
      console.log(item)
    },
    handleSelectionChange (val) {
      this.userIds = []
      for (let value of val) {
        this.userIds.push(value.userId)
      }
    },
    handleRefuse () {},
    handleagree () {},
    // 踢出参赛者
    hangleOut (index, row) {
      this.userIds.push(row.userId)
      this.$confirm('踢出后该参赛者不能再次报名，确定踢出？', '温馨提示', {
        type: 'warning'
      }).then(() => {
        this.checkOutuser()
      }).catch(() => {
        this.userIds = []
      })
    },
    hangleOutAll () {
      if (this.userIds.length > 0) {
        this.$confirm('踢出后该参赛者不能再次报名，确定踢出？', '温馨提示', {
          type: 'warning'
        }).then(() => {
          this.checkOutuser()
        }).catch(() => {
          return false
        })
      } else {
        this.$message({
          message: '请选择要踢出的组织',
          type: 'info'
        })
      }
    },
    checkOutuser () {
      raceApi.batchKickOut({
        matchId: this.$route.query.id,
        userIds: this.userIds
      }).then((res) => {
        this.$message({
          message: '踢出成功',
          type: 'success'
        })
        this.selectTeamList(this.currentTab)
      }).catch(() => {
        return false
      })
    },
    // 导出Excel
    exportExcel () {
      let fileName = ''
      let url = ''
      if (this.currentTab === 1) {
        fileName = this.race_detail.matchName + '球队参赛者.xls'
        url = '/api/match/sign/export/teamParticipant?matchId=' + this.$route.query.id + '&type=1'
      } else {
        fileName = this.race_detail.matchName + '球队待支付.xls'
        url = '/api/match/sign/export/teamParticipant?matchId=' + this.$route.query.id + '&type=2'
      }
      downloadFile(url, fileName)
    },
    // 球队队员
    showTeamList (row, column, cell, event) {
      this.$router.push({ path: '/race/detail/player/team/?id=' + this.$route.query.id + '&tasktype=' + this.$route.query.tasktype + '&orgId=' + row.userId + '&name=' + row.nickName + '&icon=' + row.iconUrl + '&matchId=' + this.$route.query.id + '&cost=' + this.race_detail.cost + '&matchtype=' + this.race_detail.matchType + '&isRun=' + this.$route.query.isRun })
    },
    // 提前结束报名
    handleTermiNation () {
      this.$confirm('确定结束报名？', '温馨提示', {
        type: 'warning'
      }).then(() => {
        raceApi.termiNation({
          matchId: this.$route.query.id
        }).then((res) => {
          this.$message({
            message: '结束报名成功',
            type: 'success'
          })
          this.isTrue = true
          this.$store.dispatch('race_detail', {
            matchId: this.$route.query.id,
            isRun: this.$route.query.isRun,
            matchtype: this.$route.query.matchtype
          })
        })
      }).catch(() => {
        return false
      })
    },
    // 关闭赛事
    handleCloseMatch () {
      this.$confirm('确定关闭赛事？', '温馨提示', {
        type: 'warning'
      }).then(() => {
        raceApi.closeMatch({
          matchId: this.$route.query.id
        }).then((res) => {
          this.$message({
            message: '关闭赛事成功',
            type: 'success'
          })
          this.$router.push({ path: '/history/detail/index?id=' + this.$route.query.id + '&tasktype=' + this.$route.query.tasktype })
        })
      })
    },
    reRender (createElement) {
      if (this.currentTab === 1 && this.race_detail.cost === 0 && !this.isHistory) {
        return createElement('div', [
          createElement('el-button', {
            domProps: {
              innerHTML: '踢出'
            },
            attrs: {
              size: 'small',
              disabled: this.race_detail.status > 4
            },
            on: {
              click: this.hangleOutAll
            }
          })
        ])
      } else if (this.currentTab === 2) {
        return createElement('div', [
          createElement('el-button', {
            domProps: {
              innerHTML: '拒绝'
            },
            attrs: {
              size: 'small'
            },
            on: {
              click: this.handleRefuse
            }
          }),
          createElement('el-button', {
            domProps: {
              innerHTML: '同意'
            },
            attrs: {
              size: 'small'
            },
            on: {
              click: this.handleagree
            }
          })
        ])
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~styles/var.scss';
.loading{
  div{
    min-height: 200px;
  }
  min-height: 200px;
}
.el-checkbox{
  color:#fff;
}
.no_matchlist{
  text-align: center;
   color:#999;
}
.players {
  .logo {
    width: 38px;
    height: 38px;
    margin: 11px 10px 0 0;
    border-radius: 50%;
  }
  .reset {
    margin-right: 10px;
  }
  .sub-logo {
    height: 14px;
    margin-top: 23px;
  }
  .team-name {
    line-height: 60px;
    height:60px;
    max-width:190px;
    overflow: hidden;
    text-overflow:ellipsis;
  }
}
.link{
  font-size: 12px;
}
.link:hover{
  cursor: pointer;
}
.team-name,
.logo,
.sub-logo,
.checkbox {
  float: left;
}

.pagination {
  display: inline-block;
}

.page {
  margin: 40px auto;
}

.warn {
  color: $orange;
}

.warn,
.red {
  font-size: 12px;
}

.red {
  color: $red;
}

table {
  tr {
    td {
      width: 33.3333333%;
      padding-bottom: 0;
      text-align: center;
    }
    &:nth-child(2n) {
      background-color: #f5f5f5;
    }
  }
}
.page {
  text-align: center;
}

.el-table__body .cell,
.el-table .cell {
  text-align: center;
}
</style>
